<template>
	<view style="height:50px;">
		<view class="cu-bar foot tabbar bg-white">
			<view class="action" :class="active=='index'?'text-blue':'text-black'"
				@click="utils.to_switch_tab('/pages/index02/index02')">
				<view class="iconfont" v-if="active == 'index'">
					<image class="indexStyle" src="../../static/tabbar/index04.png" mode="widthFix"></image>
				</view>
				<view class="iconfont" v-if="active != 'index'">
					<image src="../../static/tabbar/index03.png" mode="widthFix"></image>
				</view>
				<view class="text" v-if="active != 'index'">首页</view>
			</view>
			<!-- <view class="action" :class="active=='classify'?'text-blue':'text-black'"
				@click="utils.to_switch_tab('/pages/index/index')">
				<view class="iconfont" v-if="active == 'classify'">
					<image src="../../static/tabbar/mall02.png" mode="widthFix"></image>
				</view>
				<view class="iconfont" v-if="active != 'classify'">
					<image src="../../static/tabbar/mall01.png" mode="widthFix"></image>
				</view>
				<view class="text">巢鲜达</view>
			</view> -->
			<view class="action" :class="active=='coupon'?'text-blue':'text-black'"
				@click="utils.to_switch_tab('/pages/personalcenter/buycoupon')">
				<view class="iconfont" v-if="active == 'coupon'">
					<image src="../../static/tabbar/coupon02.png" mode="widthFix"></image>
				</view>
				<view class="iconfont" v-if="active != 'coupon'">
					<image src="../../static/tabbar/coupon01.png" mode="widthFix"></image>
				</view>
				<view class="text">券商城</view>
			</view>
			<view class="action" :class="active=='points'?'text-blue':'text-black'"
				@click="utils.to_switch_tab('/pages/personalcenter/pointscenter')">
				<view class="iconfont" v-if="active == 'points'">
					<image src="../../static/tabbar/points02.png" mode="widthFix"></image>
				</view>
				<view class="iconfont" v-if="active != 'points'">
					<image src="../../static/tabbar/points01.png" mode="widthFix"></image>
				</view>
				<view class="text">积分商城</view>
			</view>
			<!-- <view class="action add-action" :class="active=='add'?'text-blue':'text-black'"
                  @click="utils.to_url('/pages/add/add?type=0')">
                <button class="cu-btn iconfont icon-fabu addstl"></button>
                <view></view>
            </view> -->
			<!-- <view class="action" :class="active=='order'?'text-blue':'text-black'"
				@click="utils.to_switch_tab('/pages/homemaking/homemaking')">
				<view class="iconfont" v-if="active == 'order'">
					<image src="../../static/tabbar/hmk02.png" mode="widthFix"></image>
				</view>
				<view class="iconfont" v-if="active != 'order'">
					<image src="../../static/tabbar/hmk01.png" mode="widthFix"></image>
				</view>
				<view class="text">家政</view>

			</view> -->
			<view class="action" :class="active=='personalcenter'?'text-blue':'text-black'"
				@click="utils.to_switch_tab('/pages/personalcenter/personalcenter')">
				<view class="iconfont" v-if="active == 'personalcenter'">
					<image src="../../static/tabbar/my03.png" mode="widthFix"></image>
				</view>
				<view class="iconfont" v-if="active != 'personalcenter'">
					<image src="../../static/tabbar/my01.png" mode="widthFix"></image>
				</view>
				<view class="text">我的</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		METHODS
	} from 'http'
	export default {
		name: "footer-menu",
		data() {
			return {
				menuData: []
			}
		},
		mounted() {},
		props: ["active"],
		methods: {}
	}
</script>
<style>
	.text-black {
		color: #222222 !important;
	}

	.text-blue {
		color: #FF9822;
	}

	.tabbar .iconfont {
		font-size: 24px;
	}

	.tabbar .text {
		margin-top: 1vw;
	}

	.tabbar .iconfont image {
		width: 7vw;
		display: block;
		margin: 0 auto;
	}

	.tabbar .iconfont .indexStyle {
		width: 11vw;
	}

	.cu-bar.tabbar .action.add-action::after {
		box-shadow: none;
	}

	.cu-bar.foot {
		left: 0;
	}

	.cu-bar .addstl {
		position: absolute;
		top: -3vw;
		left: -1.8vw;
		z-index: 999;
		color: #FF9822;
		font-size: 16vw;
		background-color: transparent;
	}
</style>